<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1 highlight>
    Welcome to {{title}}!!
  </h1>
  <app-title [subtitle]="subtitle"></app-title>
  <!--demo1  -->
  <!-- <h3>hero name: {{hero.name}}</h3>
  <div class="">
    <label for="name">name:</label>
    <input type="text" name="name" id="name" placeholder="name" [(ngModel)]="hero.name" >
  </div> -->

  <!--demo2  -->
  <!-- <div *ngIf="selectedHero">
    <h3>{{selectedHero.name}} details!</h3>
    <div>
      <label for="">id:</label>{{selectedHero.id}}
    </div>
    <div class="">
      <label>name:</label>
      <input type="text" [(ngModel)]="selectedHero.name" placeholder="name">
    </div>
  </div> -->

  <!--demo3  -->
  <hero-detail [hero]="selectedHero"></hero-detail>

  <h3>heroes</h3>
  <ul class="heroes">
    <li *ngFor="let hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)"
    >
      <span class="badge">{{hero.id}}</span>{{hero.name}}
    </li>
  </ul>
  <img width="300" src="">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
  </li>
</ul>

